
<div style="position: fixed;bottom: 0;left: 0;width: 100%;display: none;z-index: 333;" class="underLine selectYear">
    <div class="title">
        <div class="close" tapmode onclick="cancel2()">取消</div>
        <div class="confirm" tapmode onclick="confirm2()">确定</div>
    </div>
    <div class="list-area">
        <div class="list-01" id="parent2" onscroll="CalculateDistance2(this)">
            <div class="scroll-area" id="render-item-1">
                <div class="list-item"></div>
                <?php for($i=1950;$i<=date('Y');$i++){ ?>
                <div class="list-item"><?php echo $i; ?>年</div>
                <?php } ?>
                <div class="list-item"></div>
                <div class="list-item"></div>
            </div>
        </div>
        <div class="list-01" id="child2" onscroll="CalculateDistance2(this)">
            <div class="scroll-area" id="render-item-2">
                <div class="list-item"></div>
                <div class="list-item">1月</div>
                <div class="list-item">2月</div>
                <div class="list-item">3月</div>
                <div class="list-item">4月</div>
                <div class="list-item">5月</div>
                <div class="list-item">6月</div>
                <div class="list-item">7月</div>
                <div class="list-item">8月</div>
                <div class="list-item">9月</div>
                <div class="list-item">10月</div>
                <div class="list-item">11月</div>
                <div class="list-item">12月</div>
                <div class="list-item"></div>
                <div class="list-item"></div>
            </div>
        </div>
        <div class="hr-1"></div>
        <div class="hr-2"></div>
    </div>
</div>
<script type="text/javascript">
    var isScroll2 = false;
    var timer2;
    //计算滑动距离
    function CalculateDistance2 (el) {
        isScroll2 = true;
        clearTimeout(timer2);
        var scrollDistance = +el.scrollTop;
        var parentItem = $api.domAll(el, '.list-item');
        $api.removeCls($api.dom(el, '.list-item-active'), 'list-item-active');
        $api.addCls(parentItem[parseInt(scrollDistance / 101) + 1], 'list-item-active');
        isScroll2 = false;
        timer2 = setTimeout(function () {
            if (!isScroll2) {
                el.scrollTop = (parseInt((+el.scrollTop) / 101)) * 101;
            }
        }, 300);
    }

    //确认
    function confirm2 () {
        var el = $api.dom('#parent2 .list-item-active');
        var el2 = $api.dom('#child2 .list-item-active');
        alert(el.innerHTML);
        alert(el2.innerHTML);
        api.closeFrame();
    }

    //取消
    function cancel2 () {
        api.closeFrame();
    }

</script>